import React, { useEffect, useState } from 'react'
import styles from './index.module.less'
import CustomSlider from '../components/Slider'
import CustomModal from '@/components/CustomModal'
import { useLocation, useParams } from 'umi'
import jobAbility from '../store'
import { observer, useLocalObservable } from 'mobx-react'
import PageLoading from '@/components/Global/PageLoading'
import Radar from '../components/Radar'
import BtnBotLayout from '@/components/BtnBotLayout'

function Exam() {
    const { id } = useParams<any>()
    // const [visible, setVisible] = useState(false)
    const eval_id = id
    const store = useLocalObservable(() => jobAbility)
    const { getQuestionInfo, quesInfo, setAnswer, saveRadar, radarInfo, getTestEvalsList, handleReset } = store
    const data: any = quesInfo?.[eval_id] || {}
    const [hasSave, setHasSave] = useState(false)

    useEffect(() => {
        async function init() {
            /** 获取模块信息、模块详情 */
            await getTestEvalsList(id)
            /** 获取题目 */
            await getQuestionInfo(id, eval_id)
            if (radarInfo[eval_id]) {
                setHasSave(true)
            }
        }
        init()
        return () => {
            document.title = ''
            handleReset()
        }
    }, [])

    useEffect(() => {
        if (data?.name) {
            document.title = data?.name
        }
    }, [data])

    if (!data?.questions) {
        return <PageLoading />
    }
    return (
        <div className={styles.layout_container}>
            <BtnBotLayout
                footer={
                    <div className={styles.footer}>
                        {/* {hasSave && (
                        <div className={styles.chart_btn} onClick={() => setVisible(true)}>
                            雷达图
                        </div>
                    )} */}
                        <div
                            className={styles.save_btn}
                            onClick={() => {
                                saveRadar(eval_id)
                                history.back()
                            }}
                        >
                            提交
                        </div>
                    </div>
                }
            >
                <div className={styles.container}>
                    <div className={styles.wrapper}>
                        <div className={styles.title_wrapper}>
                            <div className={styles.title_wrapper_text_outside}>
                                <div className={styles.title_wrapper_text}>{data?.name}</div>
                            </div>
                            <div className={styles.title_wrapper_desc}>{data?.detail}</div>
                        </div>
                        <div className={styles.explain}>
                            评价说明： <br />
                            {data?.eval_explain}
                        </div>
                        {data?.questions?.map((item: any, idx: number) => {
                            return (
                                <div key={item.id} className={styles.ques_wrapper}>
                                    <div className={styles.ques_title}>
                                        题目{item.index_no}：{item.title}
                                    </div>
                                    <CustomSlider
                                        value={Number(item.value || 0)}
                                        onChange={val => {
                                            setAnswer(eval_id, idx, val)
                                        }}
                                    />
                                </div>
                            )
                        })}
                    </div>
                    {/* <CustomModal
                title={'就业专业能力雷达图'}
                content={<Radar data={radarInfo[eval_id]} />}
                onOk={() => setVisible(false)}
                visible={visible}
                onClose={() => setVisible(false)}
            /> */}
                </div>
            </BtnBotLayout>
        </div>
    )
}

export default observer(Exam)
